
  <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAOwWCGwRYp76jMzcTHSAZJxRiKXZ7DXrLzxyWAdGBhEoVkrucchSRf8ZK-in_QWw4Q9UXcM6WsNif1Q"
    type="text/javascript">
  </script>
  
<div id="left">
  	<div id="breadcrumb"><?php 
  	if (strlen($city['Region']['name'])) { echo $city['Region']['name'] . ', '; }
  	echo $city['Country']['name'] ; ?></div>
  	<div class="post">
	<h2><?php echo $city['City']['name'] ; ?></h2>
	<p>You are now at a city's page. <?php if($notbeenhere && ($usercityid != $city['City']['id'])): ?>If you've been to this city, click the "I've Been Here!" button to the right. This button will not show up if you've already clicked it or if you set this city to be your home location.<?php endif; ?> If you previously clicked "I've Been Here" or if the this city is your hometown, then you can share a story about your travels to this location by clicking on the "Add Story" button. An interactive marker will be placed on the map. Existing stories will be displayed on the map as markers of a different color. The sidebar lists user stories, users who live in this city and those who have reported to have visited this city.</p>
	
	<div class="google_maps_city"><div id="map_canvas" style="width: 587px; height: 350px;"></div></div>

	<script>
		var center;
		var markerLoc;
		var map;
		var blueIcon;
		var ltblueIcon;

		<?php foreach($city['Story'] as $story): ?>
		 <?php echo "var storyloc" . $story['id'] . ";\nvar story" . $story['id'] . ";\n"; ?>
		<?php endforeach; ?>
		
		function initialize() {
		  map = new GMap2(document.getElementById("map_canvas"));
		  center = new GLatLng(<?php echo $city['City']['latitude']; ?>, <?php echo $city['City']['longitude']; ?>);
		  map.setCenter(center, 14);
		  map.setUIToDefault();
		  map.setMapType(G_HYBRID_MAP);
		  blueIcon = new GIcon(G_DEFAULT_ICON);
		  blueIcon.image = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
		  blueIcon.iconSize = new GSize(32,32);
		  blueIcon.iconAnchor = new GPoint(15,31);
		  ltblueIcon = new GIcon(G_DEFAULT_ICON);
		  ltblueIcon.image = "http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png";
		  ltblueIcon.iconSize = new GSize(32,32);
		  ltblueIcon.iconAnchor = new GPoint(15,31);
		  

		  /* add stories */

		  <?php if(!empty($city['Story'])): ?>
			<?php foreach($city['Story'] as $story): ?>
			<?php $story['message'] = str_replace("'","\'", $story['message']); ?>
			<?php $story['title'] = str_replace("'","\'", $story['title']); ?>
			
			<?php echo 'storyloc'. $story['id'] . '= new GLatLng(' . $story['latitude'] . ',' . $story['longitude'] . ');'; ?>
			<?php echo 'story'. $story['id'] . '= new GMarker(storyloc'. $story['id'] . ', {icon: blueIcon});'; ?>
			<?php echo 'map.addOverlay(story' . $story['id'] . ');';?>

			<?php echo 'function showStory' . $story['id'] . '() {map.setCenter(storyloc' . $story['id'] . ',15);'; ?>
			<?php echo 'story' . $story['id'] . ".openInfoWindowHtml('" .
				'<div style="width:200px; overflow:none;"><b>' . $html->link($story['title'], '/stories/view/' . $story['id'])
		 		. '</b> by ' . $html->link($story['User']['username'], '/users/view/' . $story['User']['id']) . '</div><br />' . 
		 		'<br /><div width="200px" style="width:200px; overflow:none;">' . ((strlen($story['message']) > 200) ? substr($story['message'],0,200) . '...' : $story['message'])
		 		 . '</div><br /><br />' . $html->link('See More','/stories/view/' . $story['id']) . "');"
		 		 . "}";
			?>
			
			<?php echo 'GEvent.addListener(story' . $story['id'] . ',"click", function() {showStory' . $story['id'] . '();});' ?>
			

			<?php endforeach; ?>
		  <?php endif; ?>

		
		}
		
		function placeMarker() {
			var msg;
			  var marker = new GMarker(map.getCenter(), {draggable: true, icon: ltblueIcon});
			  markerLoc = map.getCenter();
			  msg = '<form action="#" onsubmit="saveMarker(); return false"><p>Drag this marker to the exact location of the story.<br /><br /><input type="image" src="/img/addstory_sm.jpg" alt="AddStory" /></p></form>';
			 	map.openInfoWindowHtml(markerLoc, msg);
		
			  
			  GEvent.addListener(marker, "dragstart", function() {
			    map.closeInfoWindow();
			  });
		
			  GEvent.addListener(marker, "dragend", function(latlng) {
				  markerLoc = latlng;
				  str = markerLoc.toString();
					latitude = str.substring(1,str.indexOf(','));
					longitude = str.substring(str.indexOf(',') + 2,str.length - 1);
				  if ((latitude - <?php echo $city['City']['latitude'];?> >= .5 || latitude - <?php echo $city['City']['latitude'];?> <= -.5) ||
							(longitude - <?php echo $city['City']['longitude'];?> >= .5 || longitude - <?php echo $city['City']['longitude'];?> <= -.5))
					{
						msg = "Sorry, this location is too far away.<br><br>Please select a location closer to your city or select another city.";
					}
				  else
				  {
					  msg = '<form action="#" onsubmit="saveMarker(); return false"><p>Drag this marker to the exact location of the story.<br /><br /><input type="image" src="/img/addstory_sm.jpg" alt="AddStory" /></p></form>';
				  }
			      marker.openInfoWindowHtml(msg);
			  });
		
			  map.addOverlay(marker);
			  
		
		}
		
		function saveMarker() {
			str = markerLoc.toString();
			latitude = str.substring(1,str.indexOf(','));
			longitude = str.substring(str.indexOf(',') + 2,str.length - 1);

				window.location = '/stories/add/<?php echo $city['City']['id']; ?>/' + latitude + '/' + longitude + '/';

		}
		
	</script>
	</div>
					<div class="columns">
						<p><div class="colwide">
						<?php if(empty($posts)): ?>
                            <div class="colpostempty" style="height: 60px;"><h3 class="subhead">No posts have been added.</h3> 
								<p>Be the first one to add one! Click "New Post" below!</p>
                            </div>
                        <?php endif; ?>
                        
                        <?php if(!empty($posts)): ?>
       						<?php foreach($posts as $post): ?>
       			
                               	   	<div class="colpost"><h3 class="subhead"><?php echo $time->nice($post['Post']['created']); ?> by <?php echo $html->link($post['User']['username'], '/profiles/view/' . $post['User']['Profile']['id'], array('name' => 'post_' . $post['Post']['id'])); ?> of <?php echo $html->link($post['User']['Profile']['City']['name'], '/cities/view/' . $post['User']['Profile']['City']['id']); ?>:</h3> 
										<p><?php echo $extendedhtml->image('/images/thumb/' . $post['User']['Profile']['Image']['id'] . '/?w=50&h=50', array('class' => 'leftpost'), '/profiles/view/' . $post['User']['Profile']['id'], array()); ?><?php echo $post['Post']['text']; ?></p>
		                            </div>
		                            <h3 class="sublink"><?php if($post['User']['id'] == $me['User']['id']) echo $html->link('Delete Post', array('controller' => 'posts', 'action' => 'delete', $post['Post']['id'])); else echo ''; ?></h3>
                         	   <?php endforeach; ?>
                        <?php endif; ?>
                        <div id="newpostform" class="colnewpost" style="display: none;"><h3 class="subhead">Write on the board for <?php echo $city['City']['name'] ; ?></h3> 
						 <?php echo $form->create('Post', array('action' => 'add', 'class' => 'formcenter')); ?>							
						 <?php echo $form->textarea('text', array('id' => 'postarea')); ?>
						 <?php echo $form->hidden('city_id', array('value' => $city['City']['id'])); ?>
						 <?php echo $form->submit('/img/submit.jpg' , array( 'alt' => 'submit', 'id' => 'submitpost')); ?> 
						 <?php echo $form->end(); ?>
						</div>
                            <h3 class="subfoot"><?php echo ((isset($me['User']['id'])) ? '<a href="javascript:void();" onClick="Effect.BlindDown(\'newpostform\'); return false;">New Post</a>' : '<strong>You must be logged in to post!</strong>' ); ?></h3>
						</div></p>
					</div>
					<div class="clear2"></div>
					<p></p>
</div>
<div id="sidebar">
						<?php if($notbeenhere && $usercityid != $city['City']['id']): ?>
						<form action="/cities/beenHere/<?php echo $city['City']['id']; ?>" class="formcenter">
							<input type="image" src="/img/beenhere.jpg" alt="BeenHere" />
						</form>
						<?php endif; ?>
						<?php if(!$notbeenhere || ($usercityid == $city['City']['id'])): ?>
						<form action="#" onsubmit="placeMarker(); return false" class="formcenter">
							<input type="image" src="/img/addstory.jpg" alt="BeenHere" />
						</form>
						<?php endif; ?>
					<h2>User Stories:</h2>
					<ul>
					<?php foreach($city['Story'] as $story): ?>
						<li><a href="JavaScript:void();" onClick="JavaScript:map.setCenter(storyloc<?php echo $story['id']; ?>,16);"><?php echo ((strlen($story['title']) > 32) ? substr($story['title'],0,32) . '...' : $story['title']); ?></a></li>
					<?php endforeach; ?>
					</ul>					
					<h2>Who Lives Here:</h2>
					<table style="border:0" width="100%" align="center">
					<tr>
					<?php 
					    $i=0;
						foreach($city['Profile'] as $profile)
						{ 
						 if(!isset($profile['Visited']))
						 {
						 	$i++;
						 	echo '<td width="30px"><div style="height: 47px;overflow: none;">';
							echo $extendedhtml->image('/images/thumb/' . $profile['Image']['id'] . '/?h=40&w=40', array('class' => 'centeralign'), '/profiles/view/' . $profile['id'], array());
							echo '</div>';
							echo $html->link($profile['User']['username'], '/profiles/view/' . $profile['id']);
						 	echo '</td>';
						 	
						 	if($i % 2 == 0)
						 	 echo '</tr><tr>'; /* only two per line, because long names won't fit :( */
						 }	
						}
					?>
					</tr>
					</table>
					<h2>Who's Been Here:</h2>
					<table style="border:0; border-width: 0px; padding: 0px;" cellspacing="0" cellpadding="0" width="100%" align="center">
					<tr>
					<?php 
					    $i=0;
						foreach($city['Profile'] as $profile)
						{ 
						 if(isset($profile['Visited']))
						 {
						 	$i++;
						 	echo '<td width="30px"><div style="height: 47px;overflow: none;">';
							echo $extendedhtml->image('/images/thumb/' . $profile['Image']['id'] . '/?w=40&h=40', array('class' => 'centeralign'), '/profiles/view/' . $profile['id'], array());
							echo '</div>';
							echo $html->link($profile['User']['username'], '/profiles/view/' . $profile['id']);
						 	echo '</td>';
						 	
						 	if($i % 2 == 0)
						 	 echo '</tr><tr>'; /* only two per line, because long names won't fit :( */
						 }	
						}
					?>
					</tr>
					</table>
					
</div>


<script type="text/javascript">
	initialize();
</script>
